23장: 실행 컨텍스트(Execution Context)

실행 컨텍스트가 뭔데요?

• 엔진이 현재 실행해야 하는 코드의 모든 상태를 담고있는 Record
• 지금 실행 중인 코드가 뭔지(Function, Script, Module)
• 어떤 스코프를 사용할지(LexicalEnvironment, VariableEnvironment 등)
• this가 뭔지
• 프라이빗 필드(Class Private Name Environment)를 어떻게 사용할지 등을 묶어서 가짐

실행 컨텍스트의 구조 

1. Function
   • 실행 중인 함수 객체
   • Script 또는 Module의 코드를 평가 중이면 값은 null
   • this 바인딩, arguments 생성 규칙 등 함수 내부 동작을 결정하는데 사용
2. Realm
   • 실행되는 코드가 속한 Realm(대충 실행 환경 내지는 샌드박스 정도로 생각하면 됨..)
   • 전역 객체(GlobalObject), 전역 환격(GlobalEnv), 빌트인 객체(Intrinsics)를 포함
   • this 바인딩, 전역 객체 및 빌트인 객체 결정
3. ScriptOrModule
   • ScriptCodeEvaluation -> Script Record
   • ModuleEvaluation -> Module Record
   • 모듈의 평가 방법이 다르기 때문에 구분하기 위해 사용
   • 모듈에 대해서 자세히 다루지 않으므로 어떻게 다른지는 패스
4. LexicalEnvironment
   • 현재 식별자를 찾기 위한 Environment Record 체인
5. VariableEnvironment
   • var 선언만 별도 관리되고
   • let, const, class 선언은 LexicalEnvironment에 등록되어 관리
     • var은 함수 레벨 스코프지만, let, const, class는 블록 레벨 스코프라서 별도 관리
6. PrivateEnvironment
   • 클래스의 private 필드 및 메서드 관리

다른 언어에도 비슷한 게 있나요?

있긴 한데, JS의 Execution Context만큼 명세화 되어있지는 않습니다. 예를 들어, C의 Stack Frame에는 단순히 함수 실행에 필요한 local var, parameter, 실행 상태만 저장합니다.

23.1: 소스코드의 타입

각 소스코드 타입에 따라 실행 컨텍스트가 구성되는 방식, this 바인딩 방식, 변수 환경 구조가 달라집니다.

1. 전역 코드
2. 함수 코드
3. eval 코드
4. 모듈 코드

책의 [그림 23-1]에서는 전역 코드가 평가되면 전역 실행 컨텍스트가 생성되고, 함수 코드가 평가되면 함수 실행 컨텍스트가 생성되는 등 평가되는 소스코드의 타입에 따라 생성되는 실행 컨텍스트의 종류가 다른 것처럼 서술하고 있지만, 엄밀히 말하자면…

1. 코드의 타입은 평가 알고리즘을 선택하는 기준일 뿐입니다.
2. 사실 실행 컨텍스트는 타입이 없습니다.
3. 어떤 코드가 평가되는지에 따라 다른 형태의 실행 컨텍스트가 생성됩니다.

23.2: 소스코드의 평가와 실행

평가(Evaluation)

• 모든 소스코드는 실행 전 평가 과정을 거칩니다.
• 평가 과정에서 실행 컨텍스트가 생성되고, 해당 실행 컨텍스트가 관리하는 스코프(실행 컨텍스트가 참조하는 LexicalEnvironment/EnvironmentRecord 안에 바인딩이 저장된다는 뜻)가 구성됩니다.
• 변수, 함수 등의 선언문만 먼저 실행하여, 생성된 변수나 함수의 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록합니다.
  • var 선언은 즉시 초기화(undefined)됩니다.
  • let, const 선언은 초기화되지 않으며 TDZ에 들어갑니다.
  • 함수 선언은 함수 객체가 생성되어 환경 레코드에 등록됩니다.

실행(Execution)

• 평가 과정 이후 선언문을 제외한 소스코드가 순차적으로 실행됩니다.
• 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색하여 사용합니다.
• 실행 결과는 실행 컨텍스트가 관리하는 스코프에 저장됩니다.

예시

var x;
x = 1;

1. 평가
   • var x; 선언문을 실행하여, 스코프에 식별자 x를 등록하고 undefined로 초기화합니다.
2. 실행
   • x = 1;만 실행됩니다.
   • 실행 전, x가 선언된 변수인지 확인하기 위해, 스코프에 식별자 x가 등록되어 있는지 확인합니다.
   • 등록되어 있으면, x에 값 1을 할당합니다. 할당 결과는 실행 컨텍스트에 등록됩니다.
   • 등록되어 있지 않으면, ReferenceError가 발생합니다.

23.3: 실행 컨텍스트의 역할

전역 코드와 함수 코드로 구성된 다음 코드를 보고, 엔진이 어떻게 평가하고 실행할 지 생각해봅시다.

// 전역 변수 선언
const x = 1;
const y = 2;
 
// 함수 정의
function foo(a) {
  // 지역 변수 선언
  const x = 10;
  const y = 20;
 
  // 메서드 호출
  console.log(a + x + y); // 130
}
 
// 함수 호출
foo(100); // 130
 
// 메서드 호출
console.log(x + y); // 3

1. 전역 코드 평가
   • 전역 변수 x, y와 전역 함수 foo를 실행 컨텍스트가 관리하는 스코프에 등록합니다.
   • var 키워드로 선언된 전역 변수와, 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 됩니다.
2. 전역 코드 실행
   • x = 1;과 y = 2;를 실행하여, 전역 변수 x와 y에 값 1과 2를 할당합니다.
   • 할당 결과는 실행 컨텍스트에 등록됩니다.
   • foo(100);를 실행하여, 전역 함수 foo를 호출합니다.
     • 함수가 호출되면 전역 코드의 실행 컨텍스트가 일시 중단되고, 함수 코드의 실행 컨텍스트가 생성됩니다. (Stack에 foo()가 push)
3. 함수 코드 평가
   • 매개변수 a와 지역 변수 x, y를 실행 컨텍스트가 관리하는 스코프에 등록합니다.
   • 함수 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체가 생성되어 실행 컨텍스트가 관리하는 스코프에 등록되고², this 바인딩도 결정됩니다.
4. 함수 코드 실행
   • 매개변수 a에 100, 지역 변수 x에 10, y에 20을 할당합니다.
   • console.log(a + x + y);를 실행합니다.
     • console.log()를 호출하기 위해, 스코프에 등록된 식별자 console을 검색합니다.
     • console은 전역 객체의 프로퍼티이기 때문에, 스코프 체인을 통해 전역 객체까지 올라가서 console을 찾아냅니다.
     • log 프로퍼티를 console 객체의 프로토타입 체인을 통해 검색합니다.
     • console.log 메서드에 인수로 전달된 a + x + y가 평가됩니다.
     • a + x + y가 평가될 때, 스코프에 등록된 식별자 a, x, y를 검색합니다.
   • console.log(a + x + y);의 실행이 종료되면 함수 코드의 실행 컨텍스트가 종료되고, 전역 코드의 실행 컨텍스트가 다시 Running context가 됩니다. (Stack에서 foo()가 pop)

위 과정처럼 코드가 실행되기 위해서 실행 컨텍스트는 다음의 기능을 가집니다.

1. 식별자, 바인딩 관리
   • 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스 등)를 스코프를 구분하여 등록하고
   • 상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리할 수 있어야 합니다.
   • 전역의 경우, 전역 객체가 Object Environment Record의 BindingObject로 사용되기 때문에 전역 객체의 프로퍼티도 전역 식별자처럼 resolve될 수 있습니다.
2. 스코프 체인을 통한 식별자 검색
   • 스코프는 중첩 관계에 의해 스코프 체인을 형성하여 식별자를 검색할 수 있어야 합니다.
   • 즉, 스코프 체인을 통해 상위 스코프로 이동하며 식별자를 검색할 수 있어야 합니다.
3. 실행 흐름 제어
   • 코드의 실행 순서를 변경할 수 있어야 하고, 다시 되돌아갈 수도 있어야 합니다.

이 모든 것을 관리하는 것이 바로 실행 컨텍스트이며, 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역입니다.

구체적으로는, 실행 컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드의 실행 순서를 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리됩니다.

식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고 코드 실행 순서는 실행 컨텍스트 스택으로 관리합니다.

23.4: 실행 컨텍스트 스택

const x = 1;
 
function foo() {
  const y = 2;
 
  function bar() {
    const z = 3;
    console.log(x + y + z);
  }
  bar();
}
 
foo(); // 6

전역 코드와 함수 코드로 이루어진 위 예제 코드 중 엔진은 전역 코드를 먼저 평가하여 전역 실행 컨텍스트가 생성됩니다. 그 후, 전역 코드에서 foo()를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성됩니다.

이때 생성된 실행 컨텍스트는 스택으로³ 관리되고, 이를 실행 컨텍스트 스택 또는 콜 스택이라고 합니다.

1. 전역 코드의 평가와 실행
   • 전역 코드 평가 후, 전역 실행 컨텍스트를 생성하고 실행 컨텍스트 스택에 push
     • 전역 변수 x와 전역 함수 foo가 전역 실행 컨텍스트에 등록
   • 실행 시 x에 1을 할당
   • foo() 함수 호출
2. foo() 함수 코드의 평가와 실행
   • foo() 함수의 실행 컨텍스트가 생성되고 Stack에 foo()의 실행 컨텍스트가 push (전역 코드 실행은 일시 중단)
   • 지역 변수 y와 지역 함수 bar가 foo() 함수의 실행 컨텍스트에 등록
   • 실행 시 y에 2를 할당
   • bar() 함수 호출
3. bar() 함수 코드의 평가와 실행
   • bar() 함수의 실행 컨텍스트가 생성되고 Stack에 bar()의 실행 컨텍스트가 push (foo() 함수 실행은 일시 중단)
   • 지역 변수 z가 bar() 함수의 실행 컨텍스트에 등록
   • 실행 시 z에 3을 할당
   • console.log(x + y + z); 실행
   • bar() 함수의 실행 컨텍스트가 종료되고, foo() 함수의 실행 컨텍스트로 복귀. (Stack에서 bar()가 pop)
4. foo() 함수 코드로 복귀
   • foo() 함수의 실행 컨텍스트가 종료되고, 전역 코드의 실행 컨텍스트로 복귀. (Stack에서 foo()가 pop)
5. 전역 코드로 복귀
   • 전역 코드의 실행 컨텍스트가 종료되고, 실행 컨텍스트 스택에서 pop.

23.5: 렉시컬 환경

• 실행 컨텍스트를 구성하는 컴포넌트 중 하나입니다.

• 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조입니다.

• 스코프와 식별자를 관리합니다.

• 키와 값을 갖는 객체 형태의 전역, 함수 또는 블록 스코프를 생성합니다.

• 렉시컬 환경은 렉시컬 스코프의 실체입니다.

• LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트는 생성 초기 동일한 EnvironmentRecord를 참조합니다.

• 책에서는 생략되었지만,,, let, const, class 선언이 있는 블록이 실행될 때 새로운 LexicalEnvironment가 생성되어 등록됩니다.

• 대충 Block Scope가 나오면 분리된다고 생각하면 될 듯..

• 렉시컬 환경은 EnvironmentRecord, OuterLexicalEnvironmentReference를 가집니다.

  • EnvironmentRecord는 식별자와 식별자에 바인딩된 값을 관리합니다.
  • OuterLexicalEnvironmentReference는 상위 스코프에 대한 참조를 저장합니다.

EnvironmentRecord와 OuterLexicalEnvironmentReference가 어떻게 결정되는지 자세히 알고 싶다면..

var x = 1;
const y = 2;
 
function foo(a) {
  var x = 3;
  const y = 4;
 
  function bar(b) {
    const z = 5;
    console.log(a + b + x + y + z);
  }
  bar(10);
}
 
foo(20); //42

window.toString(); // "[object Window]"
window.__proto__.__proto__.__proto__.__proto__ === Object.prototype; // true

23.7: 실행 컨텍스트와 블록 레벨 스코프

15장에서 다뤘듯이, var로 선언된 변수는 함수 레벨 스코프를, let 또는 const로 선언된 변수는 블록 레벨 스코프를 갖습니다.

let x = 1;
 
if (true) {
  let x = 10;
  console.log(x); // 10
}
 
console.log(x); // 1

위 예제에서, if 문의 코드 블록 내에서 let으로 선언된 변수가 존재하기 때문에, 새로운 블록 레벨 스코프를 생성해야 합니다. 이때 새로 생성된 if 문 코드 블럭을 위한 렉시컬 환경의 외부 렉시컬 환경 참조는 if 문 실행 이전 전역 렉시컬 환경을 가리킨다.

실행 컨텍스트의 구조에서 다뤘던 LexicalEnvironment, VariableEnvironment와 관련이 있는데, LexicalEnvironment, VariableEnvironment가 같은 값을 참조하다가, let 키워드로 선언된 변수가 선언되면 새로운 LexicalEnvironment가 생성되게 됩니다.

이러한 과정은 모든 블록문에 대해 적용됩니다. 만약 for 문의 변수 선언문에 let 키워드를 사용했다면, 코드 블록이 반복해서 실행될 때마다 새로운 렉시컬 환경이 생성됩니다.

퀴즈

console.log(x);
console.log(y);
console.log(z);
 
var x = 1;
let y = 2;
const z = 3;

undefined;
ReferenceError;
// 실행 안 됨

var a = 1;
let b = 2;
const c = 3;
 
console.log('a' in window); // ?
console.log('b' in window); // ?
console.log('c' in window); // ?

true;
false;
false;

console.log('start');
 
function a() {
  console.log('A');
  b();
}
 
function b() {
  console.log('B');
  c();
}
 
function c() {
  console.log('C');
  // c();
}
 
a();
 
console.log('end');

const x = 1;
 
function foo() {
  const x = 10;
  const y = 20;
 
  function bar() {
    const z = 30;
    console.log(x, y, z);
  }
 
  bar();
}
 
foo();

10 20 30
1 20 30

let x = 1;
 
if (true) {
  let x = 10;
  const y = 20;
  console.log(x, y); // (1)
}
 
console.log(x); // (2)
console.log(y); // (3)

10 20
1
ReferenceError

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

0
1
2

3
3
3

각주